<!DOCTYPE html>
<html lang="zxx">

<head>
	<title>{$options.siteName} - {$options.siteTitle}</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- //Meta tag Keywords -->

	<!-- Font Awesome -->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap4/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css">
	<!-- Web-Fonts -->
	<link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=devanagari,latin-ext"
	 rel="stylesheet">
	<!-- //Web-Fonts -->
</head>

<body>
	<!-- main banner -->
	<div class="main-top" id="home">
		<!-- header -->
		<header>
			<div class="container-fluid">
				<div class="header d-lg-flex justify-content-between align-items-center py-3 px-sm-3">
					<!-- logo -->
					<div id="logo">
						<h1>
                            <a class="navbar-brand" href="#">
                                <img src="static/img/logo_white.png" style="width: 192px;">
                            </a>
                        </h1>
					</div>
					<!-- //logo -->
					<!-- nav -->
					<div class="nav_w3ls">
						<nav>
							<label for="drop" class="toggle">菜单</label>
							<input type="checkbox" id="drop" />
							<ul class="menu">
								<li><a href="#home" class="active">首页</a></li>
								<li><a href="#service">服务</a></li>
                                <li><a href="#shares">作品</a></li>
                                <li><a href="#features">特色</a></li>
                                <li><a href="#thanks">鸣谢</a></li>
								<li><a href="https://github.com/zxhm001/DataDraw" target="blank">源码</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</header>
		<!-- //header -->

		<!-- banner -->
		<div class="banner_w3lspvt position-relative">
			<div class="container">
				<div class="d-md-flex">
					<div class="w3ls_banner_txt">
						<h3 class="w3ls_pvt-title">绘制<br><span>流程图</span></h3>
						<p class="text-sty-banner">只需十秒钟，注册后即可免费绘制流程图、线框图、网络图、UML、BPMN，并存储在云端或者分享给朋友</p>
						<a href="/Login#register" class="btn button-style mt-md-5 mt-4">注册</a>
						<a href="/Home" class="btn button-style mt-md-5 mt-4" style="background-color:rgb(78, 100, 217)">登录</a>
					</div>
					<div class="banner-img">
						<img src="/static/img/banner.png" alt="" class="img-fluid">
					</div>
				</div>
			</div>
			<!-- animations effects -->
			<div class="icon-effects-w3l">
				<img src="/static/img/shape1.png" alt="" class="img-fluid shape-wthree shape-w3-one">
				<img src="/static/img/shape2.png" alt="" class="img-fluid shape-wthree shape-w3-two">
				<img src="/static/img/shape3.png" alt="" class="img-fluid shape-wthree shape-w3-three">
				<img src="/static/img/shape5.png" alt="" class="img-fluid shape-wthree shape-w3-four">
				<img src="/static/img/shape4.png" alt="" class="img-fluid shape-wthree shape-w3-five">
				<img src="/static/img/shape6.png" alt="" class="img-fluid shape-wthree shape-w3-six">
			</div>
			<!-- //animations effects -->
		</div>
		<!-- //banner -->
	</div>
	<!-- //main banner -->

	<!-- what we do section -->
	<div class="what bg-li py-5" id="service">
		<div class="container py-xl-5 py-lg-3">
			<div class="row about-bottom-w3l text-center mt-4">
				<div class="col-lg-4 about-grid">
					<div class="about-grid-main">
						<img src="/static/img/flowchart.png" alt="" class="img-fluid">
						<h4 class="my-4">流程图</h4>
						<p>流程图是表示算法、工作流或流程的一种框图表示，它以不同类型的框代表不同种类的步骤，每两个步骤之间则以箭头连接</p>
					</div>
				</div>
				<div class="col-lg-4 about-grid my-lg-0 my-5">
					<div class="about-grid-main">
						<img src="/static/img/network.png" alt="" class="img-fluid">
						<h4 class="my-4">拓扑图</h4>
						<p>拓扑结构图是指由网络节点设备和通信介质构成的网络结构图，定义了各种计算机、打印机、网络设备和其他设备的连接方式</p>
					</div>
				</div>
				<div class="col-lg-4 about-grid">
					<div class="about-grid-main">
						<img src="/static/img/uml.png" alt="" class="img-fluid">
						<h4 class="my-4">UML</h4>
						<p>UML是一种开放的方法，用于说明、可视化、构建和编写一个正在开发的、面向对象的、软件密集系统的制品的开放方法</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //what we do section -->
    
    <!-- stats -->
	<section class="bottom-count py-5" id="shares">
        <div class="container py-xl-5 py-lg-3">
            <div class="row">
                {volist name='list' id='shares'}
                <div class="col-lg-2 col-md-3 col-sm-4 col-6 thumbbox">
                    <a href="/s/{$shares.share_key}" class="thumbnail thumblink">
                        <span class="thumbspan">
                            <img src="/Share/Preview2/{$shares.share_key}" alt="{$shares.fileData|htmlspecialchars=ENT_NOQUOTES}">
                        </span>
                    </a>
                    <div class="share-name"><div>{$shares.fileData|htmlspecialchars=ENT_NOQUOTES}</div></div>
                </div>
                {/volist}
            </div>
        </div>
    </section>
    <!-- //stats -->

	<!-- services -->
	<section class="banner-bottom-w3layouts bg-li py-5" id="features">
		<div class="container py-xl-5 py-lg-3">
            <h3 class="tittle text-center font-weight-bold">我们的特色</h3>
            <p class="sub-tittle text-center mt-3 mb-sm-5 mb-4">我们是小项目，我们也是唯一的项目</p>
			<div class="row pt-lg-4">
				<div class="col-lg-4 about-in text-center">
					<div class="card">
						<div class="card-body">
							<div class="bg-clr-w3l">
								<span class="fa fa-yen"></span>
							</div>
							<h5 class="card-title mt-4 mb-3">免费</h5>
							<p class="card-text">本站基本功能完全免费，几乎没有任何限制的使用本站的图形绘制以及云存储功能，可以免费保存上千张工作用图</p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 about-in text-center my-lg-0 my-3">
					<div class="card active">
						<div class="card-body">
							<div class="bg-clr-w3l">
								<span class="fa fa-code-fork"></span>
							</div>
							<h5 class="card-title mt-4 mb-3">开源</h5>
							<p class="card-text">本站使用GPLV3许可开源，在GitHub上有完整的代码和部署文档，所有人都可以查看、修改、重新发行本站的源代码</p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 about-in text-center">
					<div class="card">
						<div class="card-body">
							<div class="bg-clr-w3l">
								<span class="fa fa-share-alt"></span>
							</div>
							<h5 class="card-title mt-4 mb-3">开放</h5>
							<p class="card-text">本站鼓励开放和分享，所有人都可以免费以别人分享的作品为模板二次创作，并将优秀的作品展示在首页以示嘉奖</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- //services -->
	<!-- middle -->
	<section class="midd-w3 py-5" id="thanks">
        <div class="container py-xl-5 py-lg-3">
            <div class="row">
                <div class="col-lg-6 about-right-faq">
                    <h3 class="text-da">鸣谢</h3>
                    <p class="mt-4">我们使用到了一些开源的项目和组件和免费的素材，对此表示真挚的感谢</p>
                    <ul class="w3l-right-book mt-4">
                        <li>mxGraph</li>
                        <li>Cloudreve</li>
                        <li>Draw.io</li>
                        <li>Pixabay</li>
                        <li>Iconfont</li>
                    </ul>
                </div>
                <div class="col-lg-6 left-wthree-img text-right">
                    <img src="/static/img/thanks.png" alt="" class="img-fluid mt-5" />
                </div>
            </div>
        </div>
    </section>
    <!-- //middle -->

	<!-- footer -->
	<footer class="bg-li py-5">
		<div class="container">
			<!-- subscribe -->
			<div class="subscribe mx-auto">
				<div class="icon-effect-w3">
					<span class="fa fa-envelope"></span>
				</div>
				<h2 class="tittle text-center font-weight-bold">联系我们</h2>
				<p class="sub-tittle text-center mt-3">如果您对我们的网站有好的建议，请发邮件给我们:<a href=mailto:zxhm001@126.com>zxhm001@126.com</a></p>
			</div>
			<!-- //subscribe -->
		</div>
	</footer>
	<!-- //footer -->
	<!-- copyright bottom -->
	<div class="copy-bottom bg-li py-4 border-top">
		<div class="container-fluid">
			<div class="d-md-flex px-md-3 position-relative text-center">
				<!-- copyright -->
				<div class="copy_right mx-md-auto mb-md-0 mb-3">
					<p class="text-bl let">开源软件·随便用不收钱·版权所有<a target="_blank" href="http://zxhm.me">个人博客</a>
                        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011102002950"
                        style="display:inline-block;text-decoration:none;height:16px;line-height:16px;">
                        <img src="/static/img/beian.png" style="float:left;opacity:0.8" />
                        <span style="height:16px;line-height:26px;margin: 0px 0px 0px 5px; color:rgba(128, 128, 128, 1);">鄂公网安备
                            42011102002950号</span>
                        </a>
                        <span style="height:26px;line-height:16px;margin: 0px 0px 0px 5px; color:rgba(128, 128, 128, 1);">鄂ICP备14013811号-3</span>
					</p>
				</div>
				<!-- //copyright -->
				<!-- move top icon -->
				<a href="#home" class="move-top text-center">
					<span class="fa fa-level-up" aria-hidden="true"></span>
				</a>
				<!-- //move top icon -->
			</div>
		</div>
	</div>
    <!-- //copyright bottom -->
    {$options.js_code}

</body>

</html>